// var loadindex=layer.load(0,{
//     shade:[1,'#000']
// })

// 轮播图
for (var i = 0; i < $('.lunbotu li').length; i++) {
    $('.main_right ol').append($('<li></li>'))
}
$('.main_right ol').children().first().addClass('active')
var $firstLi = $(".lunbotu li").first().clone()
var $lastLi = $(".lunbotu li").last().clone()
console.log($firstLi, $lastLi)
$('.lunbotu').append($firstLi)
$('.lunbotu').prepend($lastLi)

$('.lunbotu').css({
    'width': $('.lunbotu li').length * parseInt($firstLi.css('width')) + 'px',
    'left': -parseInt($firstLi.css('width')) + 'px'
})
var index = 1
var flag = true
// 右键点击
$(".main_right>a.rightBtn").click(function () {
    if (flag) {
        flag = false
        index++;
        move($('.lunbotu')[0], {
            left: -index * parseInt($firstLi.css('width'))
        }, function () {
            if (index === $('.lunbotu li').length - 1) {
                index = 1
                // 秒切
                $('.lunbotu').css('left', -index * parseInt($firstLi.css('width')) + "px")
            }
            $('.main_right>ol li').eq(index - 1).addClass('active').siblings().removeClass('active')
            flag = true
        })

    }

    return false;

})
$(".main_right>a.leftBtn").click(function () {
    if (flag) {
        flag = false
        index--;
        move($('.lunbotu')[0], {
            left: -index * parseInt($firstLi.css('width'))
        }, function () {
            if (index === 0) {
                index = $('.lunbotu li').length - 2
                // 秒切
                $('.lunbotu').css('left', -index * parseInt($firstLi.css('width')) + "px")
            }
            $('.main_right>ol li').eq(index - 1).addClass('active').siblings().removeClass('active')
            flag = true
        })

    }

    return false;

})
function fn() {
    if (flag) {
        flag = false
        index++;
        move($('.lunbotu')[0], {
            left: -index * parseInt($firstLi.css('width'))
        }, function () {
            if (index === $('.lunbotu li').length - 1) {
                index = 1
                // 秒切
                $('.lunbotu').css('left', -index * parseInt($firstLi.css('width')) + "px")
            }
            $('.main_right>ol li').eq(index - 1).addClass('active').siblings().removeClass('active')
            flag = true
        })

    }

}
$('.main_right>ol li').click(function () {
    index = $(this).index();
    $('.lunbotu').css('left', (-index - 1) * parseInt($firstLi.css('width')) + "px")
    $('.main_right>ol li').eq(index).addClass('active').siblings().removeClass('active')
})
var timer = null
timer = setInterval(fn, 1500)
$('.main_right').hover(function () {
    clearInterval(timer)
}, function () {
    timer = setInterval(fn, 1500)

})
// ---------------------------------------
// 秒杀
var res = getTimeDifference(new Date("2023-03-13 23:00:00"), new Date())
if (res.hours < 10) {
    res.hours = "0" + res.hours
}
if (res.minutes < 10) {
    res.minutes = "0" + res.minutes
}
if (res.seconds < 10) {
    res.seconds = "0" + res.seconds
}
$('.timer').children().first().text(res.hours)
$('.timer').children().eq(2).text(res.minutes)
$('.timer').children().last().text(res.seconds)

setInterval(() => {
    res = getTimeDifference(new Date("2023-03-13 23:00:00"), new Date())
    if (res.hours < 10) {
        res.hours = "0" + res.hours
    }
    if (res.minutes < 10) {
        res.minutes = "0" + res.minutes
    }
    if (res.seconds < 10) {
        res.seconds = "0" + res.seconds
    }
    $('.timer').children().first().text(res.hours)
    $('.timer').children().eq(2).text(res.minutes)
    $('.timer').children().last().text(res.seconds)
}, 1000);
//免登录
var username = getCookie('username')
if (username) {
    $('.n_left').children().eq(1).remove();
    $('.n_left').children().eq(0).after($('<b>欢迎<a href="#"style="margin:4px;">' + username + '</a>来到天猫</b>'))
    $('.n_left').children().last().remove();
    $('.n_left').children().last().after($('<a href="#">退出</a>'))
    $('.n_left').children().last().click(function () {
        var conindex = layer.confirm('你确定要退出吗', {
            btn: ['残忍离开', '依依不舍']
        }, function () {
            removeCookie("username")
            $('.n_left').children().eq(1).remove();
            $('.n_left').children().eq(0).after($('<a href="./login.html">请登录</a>'))
            $('.n_left').children().last().remove();
            $('.n_left').children().last().after($('<a href="./register.html">免费注册</a>'))
            layer.close(conindex)
        }, function () {
            layer.msg('留下来了', {
                icon: 1,
                time: 1000
            })
        })


        return false

    })
}

$.ajax({
    url: "./php/category.php",
    dataType: "json"

}).then(res => {
    var { data } = res;
    var firstCat = data.filter(item => item.pid == 0)
    handlerData(data, firstCat)
    var html = render(firstCat)
    document.querySelector('.ul').innerHTML = html;
    texiao()
    return $.ajax({
        url: "php/goods.php",
        data: {
            pid: 1191
        },
        dataType: 'json',
    })
}).then(res => {
    var { data } = res;
    str = "";
    data.forEach(item => {
        str += `
        <li>
            <img src="${item.img}" alt="">
            <div>${item.name}</div>
            <div>￥${item.price}</div>
        </li>
        `
    })
    $('.second ul').html(str)
    $('.second ul li').click(function(){
        var index=$(this).index()
        location.href='detail.html?id='+data[index].id
    })
    return $.ajax({
        url: "php/goods.php",
        data: {
            pid: 1236
        },
        dataType: 'json',
    })
}).then(res => {
    var { data } = res;
    str = "";
    data.forEach(item => {
        str += `
        <li>
            <img src="${item.img}" alt="">
            <div>${item.name}</div>
            <div>￥${item.price}</div>
        </li>
        `
    })
    $('.floor ul').html(str)
    layer.close(loadindex)
    $('.floor ul li').click(function(){
        var index=$(this).index()
        location.href='detail.html?id='+data[index].id
    })
})

function texiao() {
    var timer1;
    $('.tlt').mouseenter(function () {
        $('.ul').stop().slideDown()
    })

    $('.tlt').mouseleave(function () {
        $('.ul').stop().slideUp()
    })

    $('.ul').mouseenter(function () {
        $(this).stop().show()
    })

    $('.ul').mouseleave(function () {
        // timer1 = setTimeout(function(){
        $(this).stop().slideUp()
        // },500)

    })

    $('.ul>li').mouseenter(function () {
        $(this).children('ul').stop().show()
        $(this).siblings().children('ul').stop().hide()
        // $(this).children('ul').stop().show().parent().siblings().children('ul').stop().hide()
    })
    $('.ul>li>ul').mouseenter(function () {
        // clearInterval(timer1)
        $(this).stop().show()
    })
    $('.ul>li>ul').mouseleave(function () {
        $(this).stop().hide()
        $('.ul').stop().slideUp()
    })
}


// 递归渲染页面
function render(firstCat) {
    var str = '';
    for (var i = 0; i < firstCat.length; i++) {
        str += '<li><a href="list.html?cat=' + firstCat[i].id + '">' + firstCat[i].name + '</a>'
        if (firstCat[i].children) {
            str += '<ul>'
            str += render(firstCat[i].children)
            str += '</ul>'
        }
        str += '</li>'
    }
    return str;
}

// // 将所有数据做成层级的数据 - 带children
function handlerData(data, firstCat) {
    // 根据一级分类，找出所有层级的分类
    for (var i = 0; i < firstCat.length; i++) {
        var cat = data.filter(item => item.pid == firstCat[i].id)
        if (cat.length) {
            firstCat[i].children = cat
            handlerData(data, firstCat[i].children)
        }
    }
}
$(window).on('scroll', function () {
    if ($(window).scrollTop() >= 200) {
        $('#left_nav').show()

        
    }else{
        $('#left_nav').hide()
    }
})
$('#left_nav').children().last().children('a').click(function () {
    var index = $(this).index()
    if (index === $('#left_nav').children().last().children('a').length - 1) {
        $('html,body').animate({
            scrollTop: 0
        })
        return;
    }
    var target = $('body').children().eq(index + 5).offset().top
    console.log(target)
    $('html,body').animate({
        scrollTop: target
    })
})

